<!DOCTYPE html>
<html>
<head>
    <title>平台管理</title>
    <#include "/header.html">
    <link
            href="${request.contextPath}/statics/plugins/jquery-layout/jquery.layout-latest.css"
            rel="stylesheet" />
</head>
<body>


<style>
    .bootstrap-select{
        width: 100% !important;
    }
    .ipinfo{
        position: absolute;
        width: 250px;
        text-align: left;
        border: 1px solid #cccccc;
        bottom: 20px;
        z-index: 55;
        left: 50%;
        margin-left: -125px;
        background: #ffffff;
        border-radius: 10px;
        padding: 10px;
    }
    .fixed-table-body {
        overflow-x: visible !important;
        overflow-y: visible !important;
        height: 100%;
    }
</style>
<div id="list">
    <div class="layui-container " style="width: 100%;" id="rrapp" v-cloak>
        <form class="layui-form" action="">
            <div class="layui-row" style="margin-top: 10px;">
                <div class="layui-col-md2 ">
                    <input type="text" class="form-control" v-model="q.ip"
                           @keyup.enter="query" placeholder="ip地址">
                </div>
                <div class="layui-col-md2 " style="padding-left: 20px;">
                    <input type="text" class="form-control" v-model="q.url" @keyup.enter="query" placeholder="域名地址">
                </div>
                <div class="layui-col-md2" style="padding-left: 20px;">
                    <select class="selectpicker" id="siteSelect"  style="width:100%;">
                        <option value="">请选择站点</option>
                    </select>
                </div>
                <div class="layui-col-md2" style="padding-left: 20px;">
                    <input type="text" class="form-control" required  id="startTime" readonly="readonly" placeholder="请输入统计日期"  autocomplete="off" >
                </div>
                <div class="layui-col-md2 " style="padding-left: 20px;">
                    <a class="btn btn-default" @click="query" id="schedule_search">查询</a>

                </div>
            </div>
        </form>
    </div>
    <div class="col-sm-12 select-info table-striped">
        <table id="bootstrap-table" data-mobile-responsive="true"></table>
    </div>
</div>
<div id="add" class="layui-container" style="width: 100%;display:none;">
    <div class="layui-row" style="margin-top: 10px;">
        <div class="layui-col-md2 " >
            <a class="btn btn-default" onclick="schedule_return()" id="schedule_return">返回</a>

        </div>
    </div>
    <div class="col-sm-12 select-info table-striped">
        <table id="bootstrap-table2" data-mobile-responsive="true"></table>
    </div>
</div>


<!--<script-->
        <!--src="${request.contextPath}/statics/plugins/jquery-layout/jquery.layout-latest.js"></script>-->


<!-- <script src="${request.contextPath}/statics/js/modules/sys/user.js?_${.now?long}"></script>
-->
<script>


    $(document).ready(function() {
                layui.use('laydate', function(){
                    var laydate = layui.laydate;
                    laydate.render({

                        position: 'fixed',
                        elem: '#startTime',
                        value: new Date(),
                        showBottom:false
                    });
                    $("#schedule_search").attr("disabled",'disabled');

                    $('#bootstrap-table')
                        .bootstrapTable(
                            {
                                method : 'post', // 服务器数据的请求方式 get or post
                                url : baseURL + 'clickStatis/findClickStatisPage', // 服务器数据的加载地址
                                showRefresh : true,
                                showToggle : true,
                                showColumns : true,
                                //showExport :true,
                                sortable: true,
                                sortName:"dateStr",// 排序列名称
                                sortOrder: "desc",
                                iconSize : 'outline',
                                toolbar : '#exampleToolbar',
                                striped : true, // 设置为true会有隔行变色效果
                                dataType : "json", // 服务器返回的数据类型
                                pagination : true, // 设置为true会在底部显示分页条
                                // queryParamsType : "limit",
                                // //设置为limit则会发送符合RESTFull格式的参数
                                singleSelect : false, // 设置为true将禁止多选
                                // contentType : "application/x-www-form-urlencoded",
                                // //发送到服务器的数据编码类型
                                pageSize : 10, // 如果设置了分页，每页数据条数
                                pageNumber : 1, // 如果设置了分布，首页页码
                                // search : true, // 是否显示搜索框
                                //showColumns : false, // 是否显示内容下拉框（选择显示的列）
                                sidePagination : "server", // 设置在哪里进行分页，可选值为"client" 或者
                                // "server"
                                queryParams : function(params) {

                                    var _sort =params.sort;
                                    if(_sort=="dateStr"){
                                        _sort ='date_str'
                                    }else if(_sort=='clickNum'){
                                        _sort ='click_num'
                                    }
                                    return {
                                        // 说明：传入后台的参数包括offset开始索引，limit步长，sort排序列，order：desc或者,以及所有列的键值对
                                        limit : params.limit+'',
                                        page : ((params.offset/params.limit) + 1)+'',
                                        sidx: _sort,      //排序列名
                                        order: params.order, //排位命令（desc，asc）
                                        ip:vm.q.ip,
                                        url:vm.q.url,
                                        dateStr:$('#startTime').val(),
                                        platformId:$('#siteSelect').val()
                                    };
                                },
                                onLoadSuccess:function(){
                                    $("#schedule_search").attr("disabled",false);
                                },
                                // //请求服务器数据时，你可以通过重写参数的方式添加一些额外的参数，例如 toolbar 中的参数 如果
                                // queryParamsType = 'limit' ,返回参数必须包含
                                // limit, offset, search, sort, order 否则, 需要包含:
                                // pageSize, pageNumber, searchText, sortName,
                                // sortOrder.
                                // 返回false将会终止请求
                                columns : [
                                    {
                                        field : 'nickName',
                                        align:'center',
                                        title : '平台昵称'
                                    },
                                    {
                                        field : 'ip',
                                        align:'center',
                                        title : 'IP地址',
                                        formatter : function(value, row,index) {
                                            return '<div style="cursor:pointer;position: relative;" onclick="ipDetails(\''+value+'\',this)">'+value+'<div class="ipinfo" style="display: none"></div></div>';
                                        }
                                    },
                                    {
                                        field : 'url', // 列字段名
                                        align:'center',
                                        title : '域名地址',// 列标题
                                    },
                                    {
                                        field : 'dateStr',
                                        align:'center',
                                        title : '统计日期',
                                        sortable:true,
                                        formatter : function(value, row,index) {
                                            return value.substring(0,value.length-9);
                                        }
                                    },
                                    {
                                        field : 'clickNum',
                                        align:'center',
                                        title : '点击次数',
                                        sortable:true
                                    },
                                    {
                                        field : '',
                                        align:'center',
                                        title : '操作',
                                        formatter : function(value, row,index) {

                                            if(row.isDisplay){
                                                var e = '<div style="margin-right: 10px;" class="btn btn-primary btn-sm " onclick="details(\''+row.dateStr.substring(0,row.dateStr.length-9)+"','"+row.ip+"','"+row.url+"','"+row.platformId+'\')"><i class="fa fa-edit" style="margin-right:5px;"></i>详情</div>';
                                            }else{
                                                var e = ""
                                            }

                                            return e;

                                        }
                                    }]
                            });
                });

                $.ajax({
                    type : "get",
                    url : baseURL+"platform/findAllPlatform",
                    dataType : "json",
                    success: function(data) {
                        if(data.code==0){
                            var _html = ''
                            for(var i=0;i<data.platformList.length;i++){
                                _html = _html + '<option value="'+data.platformList[i].platformId+'">'+data.platformList[i].nickName+'</option>'
                            }

                            $('#siteSelect').append(_html);
                            $('#siteSelect').selectpicker('refresh');
                        }else{
                            layer.msg('数据获取失败');
                        }
                    },
                    error:function(){
                        statsData = false;
                        layer.msg('数据获取失败');
                    }
                });
            });
    function ipDetails(e,_this){
        if($(_this).find('.ipinfo').css('display')=="block"){
            $('.ipinfo').hide('300')
            return false;
        }
        var index = layer.load(2);

        $.ajax({
            type: "get",
            url: "http://ip-api.com/json/"+e+'?lang=zh-CN',
            success: function (data) {
                layer.close(index);
                if(data.status=='success'){
                    $('.ipinfo').hide('300')
                    $(_this).find('.ipinfo').html('<p>国家:'+data.country+'</p><p>地区:+'+data.city+'</p><p>运营商:+'+data.isp+'</p><p>域名商:+'+data.org+'</p>').show('300')

                }else if(data.status=='fail'){
                    $('.ipinfo').hide('300')
                    $(_this).find('.ipinfo').html('<p>查询信息有误</p>').show('300')

                }
                $(document).on("click", function(){
                    $(".ipinfo").hide('300');
                });
            }
        })
    }
    function details(dateStr,ip,url,platform_id){
        var opt = {
            url: baseURL + 'clickStatis/findBiClickRecordPage',
            silent: true,
            query:{
                limit : 10+'',
                page : 1+'',
                ip:ip,
                url:url,
                dateStr:dateStr,
                platformId:platform_id
            }
        };
        $('#bootstrap-table2').bootstrapTable('refresh',opt);
        $('#bootstrap-table2')
            .bootstrapTable(
                {
                    method : 'post', // 服务器数据的请求方式 get or post
                    url : baseURL + 'clickStatis/findBiClickRecordPage', // 服务器数据的加载地址
                    showRefresh : true,
                    showToggle : true,
                    showColumns : true,
                    //showExport :true,
                    sortable: true,
                    sortName:"dateStr",// 排序列名称
                    sortOrder: "desc",
                    iconSize : 'outline',
                    toolbar : '#exampleToolbar',
                    striped : true, // 设置为true会有隔行变色效果
                    dataType : "json", // 服务器返回的数据类型
                    pagination : true, // 设置为true会在底部显示分页条
                    // queryParamsType : "limit",
                    // //设置为limit则会发送符合RESTFull格式的参数
                    singleSelect : false, // 设置为true将禁止多选
                    // contentType : "application/x-www-form-urlencoded",
                    // //发送到服务器的数据编码类型
                    pageSize : 10, // 如果设置了分页，每页数据条数
                    pageNumber : 1, // 如果设置了分布，首页页码
                    // search : true, // 是否显示搜索框
                    //showColumns : false, // 是否显示内容下拉框（选择显示的列）
                    sidePagination : "server", // 设置在哪里进行分页，可选值为"client" 或者
                    // "server"
                    queryParams : function(params) {

                        return {
                            // 说明：传入后台的参数包括offset开始索引，limit步长，sort排序列，order：desc或者,以及所有列的键值对
                            limit : params.limit+'',
                            page : ((params.offset/params.limit) + 1)+'',
                            ip:ip,
                            url:url,
                            dateStr:dateStr,
                            platformId:platform_id
                        };
                    },

                    // //请求服务器数据时，你可以通过重写参数的方式添加一些额外的参数，例如 toolbar 中的参数 如果
                    // queryParamsType = 'limit' ,返回参数必须包含
                    // limit, offset, search, sort, order 否则, 需要包含:
                    // pageSize, pageNumber, searchText, sortName,
                    // sortOrder.
                    // 返回false将会终止请求
                    columns : [
                        {
                            field : 'nickName',
                            align:'center',
                            title : '平台昵称'
                        },
                        {
                            field : 'ip',
                            align:'center',
                            title : 'IP地址'
                        },
                        {
                            field : 'url', // 列字段名
                            align:'center',
                            title : '域名地址',// 列标题
                        },
                        {
                            field : 'createTime',
                            align:'center',
                            title : '统计日期'
                        }]
                });

        $('#list').hide();
        $('#add').show()
    }

    function schedule_return(){
        $('#list').show();
        $('#add').hide()
    }
    var vm = new Vue({
        el : '#rrapp',
        data : {
            q : {
                ip : '',
                url:'',
                time:''
            },

            roleList : {},

        },
        methods : {
            query : function() {
                vm.reload();
            },

            reload : function() {

                $("#schedule_search").attr("disabled",'disabled');
                var opt = {
                    url: baseURL + 'clickStatis/findClickStatisPage',
                    silent: true,
                    query:{
                        limit : 10+'',
                        page : 1+'',
                        ip:vm.q.ip,
                        url:vm.q.url,
                        dateStr:$('#startTime').val(),
                        platformId:$('#siteSelect').val()
                    }
                };

                $('#bootstrap-table').bootstrapTable('refresh',
                    opt);

            }
        }
    });

</script>


</body>
</html>